<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--可视化标签--%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<%--
  Created by IntelliJ IDEA.
  User: 86173
  Date: 2024/6/18
  Time: 16:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <%--引入layer的js文件--%>
    <script src="js/layer-v3.1.1/layer/layer.js"></script>
    <style>
        .box{
            width: 80%;
            margin:0 auto;
           border-radius: 10px 10px;
            border:  solid 3px  #b8daff;
            text-align: center;
            padding: 50px;
            box-shadow: 2px 2px 2px 2px skyblue;
        }
        h2{
            text-align: center;
            font-weight: bold;
            /*background: #80bdff;*/
            font-size: 50px;
        }
        .btn-block{
            width: 120px;
            height: 40px;
            margin-left: 140px;
            margin-bottom: 5px;
            background: #80bdff;
        }
        .btn-info{
            width: 330px;
            height: 60px;
            margin-top: 30px;
            margin-left: 20px;
            background: #b8daff;
        }
        table {
            border:solid 3px skyblue ;
            border:  solid 3px  #b8daff;
        }
        th{
            border:solid 3px skyblue ;
            border:  solid 3px  #b8daff;
        }
        tr{
            border:solid 3px skyblue ;
            border:  solid 3px  #b8daff;
        }
        td{
            border:solid 3px skyblue ;
            border:  solid 3px  #b8daff;
        }
        .table-striped>tbody>tr:nth-of-type(th){background: #80bdff;
        }

    </style>
    <script>
        function addBook()
        {
            $("#accountDiv").css("display", "block");
            $("#btn-add-book").html("添加图书");
            $("#bookForm")[0].action = "book.do?operate=addBook";
            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',//加上边框
                area: ['400px', '400px'],//宽高
                title: '图书信息添加',//标题
                content: $("#addBook"),
                zIndex: 19891014,
                offset: '50px'//设置垂直坐标
            });
        }
            //离职或删除弹框
            function addLeave(id) {
            $("#btn-lea-book").html("下架图书");

            //获得表格中的员工数据
            let LeaveId= $("#"+id)[0].cells[0].innerHTML;
            let LeaveName = $("#"+id)[0].cells[1].innerHTML;//书本名字
            // //将表格获得的数据添加到离职的表单中
            $("#leaveId").val(LeaveId);
            $("#leavename").html(LeaveName);
                $("#accountDiv").css("display", "block");
            $("#leaveForm")[0].action = "leave.do?operate=addLeave";
            //页面层
            layer.open({
            type: 1,
            skin: 'layui-layer-rim',//加上边框
            area: ['500px', '400px'],//宽高
            title: '图书下架',//标题
            content: $("#addLeave"),
            zIndex: 19891014,
            offset: '50px'//设置垂直坐标
        });
        }

        //修改员工
        function showUpdateEmpWin(id) {

            // alert(id);
            //动态实现无账户信息
            //     $("#accountDiv").css("display", "none");
            $("#btn-upd-emp").html("修改图书信息");
            //设置修改的action的值
            $("#updForm")[0].action = "emp.do?operate=updateEmp";
            //获得表格中的员工数据
            let upbookId = $("#" + id)[0].cells[0].innerHTML;
            let upbookName = $("#" + id)[0].cells[1].innerHTML;//图书姓名
            let upbookPrice = $("#" + id)[0].cells[2].innerHTML;//图书价格
            let upbookUpload_time = $("#" + id)[0].cells[3].innerHTML;//上架时间
            let upbookBorrow_id = $("#" + id)[0].cells[4].innerHTML;//借阅id
            let upbookBorrow_time = $("#" + id)[0].cells[6].innerHTML;//借阅时间

            $("#upbookId").val(upbookId);
            //将表格中的数据设置到表中
            $("#upbookName").val(upbookName);
            $("#upbookPrice").text(upbookPrice);
            $("#upbookUpload_time").text(upbookUpload_time.trim());
            $("#upbookBorrow_id").text(upbookBorrow_id);
            $("#upbookBorrow_time").text(upbookBorrow_time.trim());
            let upbookState = $("#" + id)[0].cells[5].innerHTML.trim();//借阅状态
            $("#upbookState").val(upbookState==="已借阅"?"1":"2");

            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',//加上边框
                area: ['600px', '400px'],//宽高
                title: '修改图书信息',//标题
                content: $("#updEmp"),
                zIndex: 19891014,
                offset: '50px'//设置垂直坐标
            });
        }
       window.onload=function (){
            var tbl=document.getElementById("table");
            var row=tbl.getElementsByTagName("tr");
           for (let i = 0; i <row.length ; i++) {
               if (i%2==0){
                   row[i].style.backgroundColor="#b8daff";
               }else{
                   row[i].style.backgroundColor="#ffffff";
               }
           }
       }
    </script>
</head>
<body>
<div class="win-addBook" id="addBook" style="display: none">
    <form method="post" id="bookForm">
        <input type="hidden" name="bookId" id="bookId"/>
        <div class="mb-3">
            <label for="bookName" class="form-label">图书姓名</label>
            <input type="text" class="form-control" name="bookName" id="bookName" placeholder="请输入图书姓名">
        </div>
        <div class="mb-3">
            <label for="bookPrice" class="form-label">团书价格</label>
            <input type="text" class="form-control" name="bookPrice" id="bookPrice" placeholder="请输入图书价格">
        </div>
        <div class="mb-3">
                <label for="bookUpload_time" class="form-label">上架时间</label>
                <input type="text" class="form-control" name="bookUpload_time" id="bookUpload_time" placeholder="请输入上架时间">
        </div>
        <div class="mb-3">
            <label for="bookBorrow_id" class="form-label">借阅id</label>
            <input type="text" class="form-control" name="bookBorrow_id" id="bookBorrow_id" placeholder="请输入借阅人id">
        </div>
        <div class="mb-3">
            <label for="bookBorrow_time" class="form-label">借阅时间</label>
            <input type="text" class="form-control" name="bookBorrow_time" id="bookBorrow_time" placeholder="请输入借阅时间">
        </div>
        <div class="mb-3">
                <label for="bookState" class="form-label">图书状态</label>
                <input type="text" class="form-control" name="bookState" id="bookState">
        </div>
        <div class="mb-3">
                <button id="btn-add-book" class="btn btn-primary btn-lg btn-info">添加图书</button>
<%--            <button id="btn-lea-book" class="btn btn-primary btn-lg btn-info">下架图书</button>--%>

        </div>
    </form>
</div>
<%--    离职员工的弹框信息--%>
<%--<div class="win-addLeave" id="addLeave" style="display: none">--%>
<%--    <form name="leaveForm" method="post" id="leaveForm" >--%>
<%--        &lt;%&ndash;添加一个隐藏域&ndash;%&gt;--%>
<%--        <input type="hidden" name="Id" id="leaveId"/>--%>
<%--        <div class="mb-3">--%>
<%--            <label class="form-label">下架书名</label>--%>
<%--            <label id="leavename" class="form-label"></label>--%>

<%--        </div>--%>

<%--        <div class="form-group">--%>
<%--            <label>下架原因：</label>--%>
<%--            <textarea class="form-control" rows="3" name="leave_reasons"></textarea>--%>
<%--        </div>--%>
<%--        <button class="btn btn-primary btn-lg btn-block">确认下架</button>--%>
<%--    </form>--%>
<%--</div>--%>
<div class="win-addLeave" id="addLeave" style="display: none">
    <form method="post" id="leaveForm">
        <input type="hidden" name="Id" id="leaveId"/>
        <div class="mb-3">
            <label class="form-label">下架书名</label>
            <label id="leavename"  class="form-label"></label>
        </div>
        <div class="mb-3">
            <label for="leave_reasons" class="form-label">下架原因</label>
            <input type="text" class="form-control" name="leave_reasons" id="leave_reasons" placeholder="请输入下架原因">
        </div>
        <button class="btn btn-primary btn-lg btn-info" style="width: 440px;height: 50px">确认下架</button>
    </form>
</div>
</form>
<div class="win-updEmp" id="updEmp" style="display: none">
    <form method="post" id="updForm">
        <input type="hidden" name="bookId" id="upbookId"> <!-- Hidden field to store employee ID -->
        <div class="mb-3">
            <label for="upbookName" class="form-label">图书姓名</label>
            <input type="text" class="form-control" name="bookName" id="upbookName" placeholder="请输入图书姓名">
        </div>
        <div class="mb-3">
            <label class="form-label">图书价格:</label>
            <label id="upbookPrice" class="form-label"></label>

        </div>
        <div class="mb-3">
            <label class="form-label">上架时间:</label>
            <label id="upbookUpload_time" class="form-label"></label>
        </div>
        <div class="mb-3">
            <label class="form-label">借阅时间:</label>
            <label id="upbookBorrow_time" class="form-label"></label>
        </div>
        <div class="mb-3 form-check-inline">
            <label for="bookState" class="form-label" style="width: 80px">借阅状态</label>
            <select class="form-control" name="bookState" id="upbookState">
                <option value="1">已借阅</option>
                <option value="2">未借阅</option>
            </select>
        </div>
        <div class="operateDiv">
            <button type="button" class="btn btn-primary btn-info"  style="width: 540px;height: 50px;" onclick="showAddEmpWin(${bookView.id})">
                修改图书信息
            </button>
        </div>
    </form>
</div>




<h2>图书展示</h2>
<button class="btn btn-primary  btn-block" onclick="addBook()">添加图书信息</button>

<div class="box">
    <table  class="table  table-striped ">
        <thead>
        <tr>
            <th>图书编号</th>
            <th>图书姓名</th>
            <th>图书价格</th>
            <th>上架时间</th>
            <th>借阅ID</th>
            <th>借阅时间</th>
            <th>借阅状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="bookView" items="${requestScope.bookList}">
            <tr id="${bookView.id}">
                <td>${bookView.id}</td>
                <td>${bookView.b_name}</td>
                <td>${bookView.b_price}</td>
                <td>
<%--                    <fmt:formatDate value="${bookView.upload_time}" pattern="yyyy-MM-dd"/>--%>
                    ${bookView.upload_time}
                </td>
                <td>
                    ${bookView.borrow_id}
                </td>
                <td>
<%--                    <fmt:formatDate value="${bookView.upload_time}" pattern="yyyy-MM-dd"/>--%>
                    ${bookView.borrow_time}
                </td>
                <td>
                        ${(bookView.state==1)?"已借阅":""}
                        ${(bookView.state==-1)?"下架":""}
                                ${(bookView.state==0)?"上架":""}
                </td>
                <td>
                    <a href="javaScript:showUpdateEmpWin(${bookView.id})"
                       class="btn btn-primary btn-block">修改</a>
                    <button class="btn  btn-primary btn-block" onclick="addLeave(${bookView.id})">下架</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</body>
</html>
